<script>
import styled from 'vue-styled-components'
import req from '@/api/apiSetting'
const StyledContainer = styled.div`
  width: 100%;
  height: 100%;
  padding:20px;

  .el-form-item__label{
    color: #333;
    line-height: 20px;
    font-weight:bold;
  }

  .el-form-item.is-required .el-form-item__label:before{
    color: #FF4A1C !important;
  }

  .el-button--primary{
    background-color: #0F9D7D;
    border-color: #0F9D7D;
    padding:10px 13px;

    &:focus, :hover {
      background: rgb(15 157 125 / 78%);
      border-color: rgb(15 157 125 / 78%);
      color: #FFF;
    }
  }

  .el-input__inner{
    color:#333;
  }
`
export default {
  data () {
    return {
      form: {
        printOrg: '',
        printUser: '',
        customerName: '',
        customerAccount: '',
      },
      rules: {

      },
    }
  },
  // eslint-disable-next-line no-unused-vars
  beforeRouteLeave (to, from, next) {
    next()
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      let ret = await req.get('api/getAppConfig')
      if (ret.data.code === 0) {
        this.form = ret.data.data
      }
    },
    handleSubmit () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let ret = await req.post('api/saveSetting', {
            ...this.form,
          })
          if (ret.data.code === 0) {
            window.Toast.success('保存设置成功')
          } else {
            window.Toast.error('保存设置错误：' + ret.data.msg)
          }
        }
      })
    },
  },
  render () {
    let { form, rules } = this
    return (
      <StyledContainer>
        <el-form
          ref="form"
          props={{
            model: form,
            rules: rules,
            labelPosition: 'top',
          }}>
          <el-form-item label="打印机构" prop="printOrg">
            <el-input v-model={form.printOrg}/>
          </el-form-item>
          <el-form-item label="打印人员" prop="printUser">
            <el-input v-model={form.printUser}/>
          </el-form-item>
          <el-form-item label="客户名称" prop="customerName">
            <el-input v-model={form.customerName}/>
          </el-form-item>
          <el-form-item label="客户账号" prop="customerAccount">
            <el-input v-model={form.customerAccount}/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" on-click={this.handleSubmit}>保存</el-button>
          </el-form-item>
        </el-form>
      </StyledContainer>
    )
  },
}
</script>
